<template>
  <div class="page-hire-user">
    <div class="board">
      <div class="avatar">
        <img v-if="customerInfo.headimgurl" :src="customerInfo.headimgurl" alt="">
      </div>
      <div class="username">
        {{customerInfo.nickname}}
      </div>
      <!-- <div class="edit">
        <van-icon name="edit" />
      </div> -->
    </div>
    
    <van-cell-group class="user-menus">
      <van-cell title="资金明细" is-link :to="{name: 'moneyDetail'}">
        <i slot="icon" class="iconfont icon-wallet"></i>
      </van-cell>
      <van-cell title="我的关注" is-link :to="{name: 'favDesigners'}">
        <i slot="icon" class="iconfont icon-fav"></i>
      </van-cell>

      <a class="van-cell van-cell--clickable" href="tel:13812345678">
        <i class="iconfont icon-service"></i>
        <div class="van-cell__title">
          <span>投诉建议</span>
        </div>
        <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
      </a>
      <!-- <van-cell title="投诉建议" is-link>
        <a slot="icon" href="tel:13812345678">
          <i class="iconfont icon-service"></i>
        </a>
        <a slot="icon" href="tel:13812345678">
          <i class="iconfont icon-service"></i>
        </a>
      </van-cell> -->
    </van-cell-group>
  </div>
</template>

<script>
import {userInfo} from '../../api/user'
export default {
  data(){
    return {
      customerInfo: {
        nickname: '',
        headimgurl: '',
      }
    }
  },
  methods: {
    getUserInfo(){
      userInfo().then(rsp => {
        localStorage.customerInfo = JSON.stringify(rsp.data)
        this.customerInfo = rsp.data
      })
    }
  },
  created(){
    this.getUserInfo()
  }
};
</script>

<style lang="less">
.page-hire-user {
  width:100%;
  .board {
    position: relative;
    width: 100%;
    padding: 10% 0;
    margin-bottom: 20px;
    background-color: #fff;
    .avatar{
      width: 80px;
      height: 80px;
      margin: 0 auto 15px;
      border-radius: 50%;
      overflow: hidden;
      img{
        display: block;
        
      }
    }
    .username{
      text-align: center;
    }
    .edit{
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }

  .user-menus {
    margin-bottom: 15px;
    .iconfont{
      margin-right: 5px;
      font-size: 130%;
    }
  }
}
</style>
